﻿<link href="~/miniui_net/demo/demo.css" rel="stylesheet" />
<style>
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div class="mini-splitter" style="width: 100%; height: 100%;">
    <div size="40%" showCollapseButton="false">
        <div style="height:6%;width:100%;padding:5px;">
            查询：<input id="Role" class="mini-textbox" emptyText="请输入角色名" width="165" />
            <a class="mini-button" style="width:60px;" onclick="addRow()">新增</a>
        </div>
        <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 94%;"
             url="/Home/GetUSERROLEList" oncellclick="onclickrow()" allowCellSelect="false" allowCellEdit="true" cellEditAction="cellclick"
             allowCellValid="true"
             oncellvalidation="CellValidation"
             >
            <div property="columns">
                <div type="indexcolumn">序号</div>
                <div type="checkcolumn">请选择</div>
                <div field="ROLENAME" width="120" align="center" headerAlign="center" allowSort="true" vtype="required">员工帐号
                <input property="editor" vtype="required" id="tb" class="mini-textbox" style="width:100%;"/>
                </div>
                <div name="action" headerAlign="center" align="center" renderer="onActionRole">操作</div>
            </div>
        </div>
    </div>
    <div showCollapseButton="false">
        <div id="treegrid2" class="mini-treegrid" style="width: 100%; height: 100%;"
             url="/Home/GetUserMenuList?ROLEID=0" showTreeIcon="true"
             treeColumn="MENUNAME" idField="MENUID" parentField="PID" resultAsTree="false"
             allowResize="false" expandOnLoad="true">
            <div property="columns">
                <div type="indexcolumn" headerAlign="center">序号</div>
                <div name="MENUNAME" field="MENUNAME" align="center" headerAlign="center">菜单名称</div>      
                <div field="MENUTYPE" align="center" headerAlign="center">类型</div>
                <div field="ISENABLE" align="center" headerAlign="center" renderer="onIsendRenderer">状态</div>
                <div name="action" headerAlign="center" align="center" renderer="onActionRenderer">操作</div>
            </div>
        </div>
    </div>
</div>
<script src="~/miniui_net/scripts/boot.js"></script>
<script>
    mini.parse();
    var grid1 = mini.get("datagrid1");
    var grid = mini.get("treegrid2");
    grid1.load({ ROLEID: 0});
    //grid.load({ ROLEID});
    // 操作按钮
    function onActionRenderer(e) {
        var s = "";
        var rowIndex = e.row;
        if (rowIndex.REMARK == 1) {
            return s += '<a class="mini-button" style="width:60px;" onclick="Add()">删除</a> '
        }
        return '<a class="mini-button" style="width:60px;" onclick="delete()">添加</a> ';
    }
    function onIsendRenderer(e) {
        if (e.value == 1) return "启用";
        else return "禁用";
    }
    function onclickrow(sender, record) {
        var row = grid1.getSelected();
        grid.load({ ROLEID: row.ROLEID });
    }
    function onActionRole(e)
    {
        var rowIndex = e.row;
        var s = `<a class="mini-button" style="width:60px;" onclick="CreateRole(${rowIndex.ROLEID},${e.rowIndex})">编辑</a> ` +
            '<a class="mini-button" style="width:60px;" onclick="delete()">删除</a> ';
        return s;
    }
    function CreateRole(value, rowIndex)
    {
        grid1.setCurrentCell([rowIndex, 2]);
        grid1.beginEditCell();
    }
    function CellValidation(e) {
        console.log(e)
        if (e.field == "ROLENAME") {
            if (!e.isValid) {
                alert("内容不能为空");
                grid1.reject();
            }
            else {

            }
        }
    }
    function addRow() {
        grid1.validate()
        if (grid1.isValid()) {
            var newRow = { name: "New Row" };
            grid1.addRow(newRow, 0);
        } 
        //grid1.validateRow(newRow);   //加入新行，马上验证新行
    }
</script>
